<template>
    <div class="login-div">
        <div class="login-content">
            <h2 class="title">物联网后台管理系统</h2>
            <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                            v-model="loginForm.password"
                            type="password"
                            auto-complete="off"
                            placeholder="密码"
                            @keyup.enter.native="handleLogin">
                    </el-input>
                </el-form-item>
                <el-form-item style="width:100%;">
                    <el-button size="medium"
                               type="primary"
                               style="width:100%;"
                               :disabled="loginDisable"
                               @click.native.prevent="handleLogin">
                        <span>{{loginButtonText}}</span>
                    </el-button>
                </el-form-item>
                <div>
                    <!-- 根据手机号验证码或邮箱地址重置密码 -->
                    <el-button style="background-color: white">
                        忘记密码
                    </el-button>
                    <!-- 注册新用户(除添加外的方式) -->
                    <el-button style="background-color: gold;margin-left: 10px"
                               @click="handleRegister()">
                        免费注册
                    </el-button>
                </div>
                <el-divider content-position="center">其他方式登录</el-divider>
                <div>
                    <!-- 码云 -->
                    <a href="https://gitee.com/oauth/authorize?client_id=7267c575584f46166aa3baa6c58acee5346f3f31bc1756579ca902a8165481b4&redirect_uri=http://localhost:39001/xiaozhen-sso/gitee/login&response_type=code">
                        <div style="width: 32px; height: 32px; float: left;">
                            <img style="width: 24px; height: 24px;"
                                      src="/src/assets/images/third/gitee.png"/>
                        </div>
                    </a>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>

    export default {
        name: "login",
        data() {
            return {
                loginDisable: false,
                loginButtonText: '登 录',
                loginForm: {
                    username: "admin",
                    password: "admin123",
                },
                loginRules: {
                    username: [
                        {required: true, trigger: "blur", message: "请输入您的账号"}
                    ],
                    password: [
                        {required: true, trigger: "blur", message: "请输入您的密码"}
                    ],
                },
            }
        },
        methods: {
            handleLogin() {
                this.loginDisable = true
                this.loginButtonText = '正 在 登 录'
                this.$store.dispatch("Login", this.loginForm).then(() => {
                    this.$router.push({path: this.redirect || "/index"}).catch(() => {
                    });
                }).catch((error) => {
                    this.loginDisable = false
                    this.loginButtonText = '登 录'
                    this.msgError("登 录 失 败")
                });
            },
            handleGiteeLogin() {
                this.$router.push('')
            },
            handleRegister() {
                this.$router.push("register")
            },
        }
    }
</script>

<style lang="scss" scoped>

    .login-div {
        width: 100%;
        height: 100%;
        text-align: center;
        background-image: url("/src/assets/images/login_bg.jpg");
        background-size: cover;

        .login-content {
            padding: 15% 30% 0 20%;
            min-width: 300px;

            .title {
                color: #a0f8f8;
            }

            .login-form {
                width: 300px;
                display: inline-block;
            }
        }
    }
</style>
